import { Component } from '@angular/core';
import { AgRendererComponent } from '@ag-grid-community/angular';
import { ICellRendererParams } from '@ag-grid-community/core';
import { deepClone } from '../../../utils/utils';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { UploadFile } from '@shared/apes/upload';
import { toBoolean } from '@shared/apes/core/util/convert';

@Component({
  selector: 'apes-render-badge',
  template: `

    <div>
      {{this.formatter(params.value)}}
    </div>
    <div class="render-badge" [ngClass]="{'render-state-back': badgeKey == 0 }" *ngIf="stateFormatter()">
      <span class="render-badge-text" *ngIf="badgeFormatter != ''"
            apes-tooltip [apesTooltipTitle]="titleTemplate">{{badgeKey != 0 ? badgeKey : '' }}</span>
      <span class="render-badge-text" *ngIf="badgeFormatter == ''">{{badgeKey != 0 ? badgeKey : '' }}</span>
    </div>
    <!--<a nz-tooltip [nzTooltipTitle]="titleTemplate">This Tooltip has an Icon</a>-->
    <ng-template #titleTemplate>
      <span>{{tooltipFormatter()}}</span>
    </ng-template>

  `,
  styles: [`
    .render-badge {
      text-align: center;
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      border: 15px solid;
      border-color: red red transparent transparent;
    }

    .render-state-back {
      border-color: #A8A19D #A8A19D transparent transparent;
    }

    .render-badge-text {
      position: absolute;
      top: -19px;
      right: -12px;
      color: #fff;
      width: 15px;
      height: 30px;
    }
  `],
})
export class ApesRenderBadgeComponent implements AgRendererComponent {
  value: any;
  params: ICellRendererParams;
  valueFormatter = '';
  badgeFormatter = '';
  badgeState = '';
  badgeKey = null;

  constructor(private  expressionService: ExpressionService) {
  }

  refresh(params: any): boolean {
    return false;
  }

  agInit(params: ICellRendererParams): void {
    this.params = params;
    let key;
    if (params.hasOwnProperty('colDef')) {
      this.valueFormatter = deepClone(params.colDef['valueFormatter']);
      this.badgeFormatter = deepClone(params.colDef['badgeFormatter']);
      this.badgeState = deepClone(params.colDef['badgeState']);
      key = deepClone(params.colDef['badgeKey']);
    } else {
      this.valueFormatter = deepClone(params.column['colDef']['valueFormatter']);
      this.badgeFormatter = deepClone(params.column['colDef']['badgeFormatter']);
      this.badgeState = deepClone(params.column['colDef']['badgeState']);
      key = deepClone(params.colDef['badgeKey']);
    }
    if (key) {
      this.badgeKey = this.params.data[key];
    }
    this.stateFormatter();
  }

  formatter(value: any) {
    let expression = this.valueFormatter ? this.valueFormatter : 'value.name';
    return this.expressionService.evaluate(expression, {
      context: '',
      model: '',
      value: value,
    });
  }

  stateFormatter() {
    let expression = this.badgeState ? this.badgeState : 'false';
    return this.expressionService.evaluate(expression, {
      context: '',
      model: '',
      data: this.params['data'],
    });
  }

  tooltipFormatter() {
    let expression = this.badgeFormatter ? this.badgeFormatter : this.badgeKey + '';
    return this.expressionService.evaluate(expression, {
      context: '',
      model: '',
      value: this.params['value'],
      data: this.params['data'],
    });
  }
}
